<template>
  <el-dialog :title="`${msg}用户`" :visible="isShow" @close="handleCancel">
    <el-form
      :model="addForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addForm.username"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email"></el-input>
      </el-form-item>
      <el-form-item v-if="!user" label="密码" prop="password">
        <el-input v-model="addForm.password"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-input v-model="addForm.role"></el-input>
      </el-form-item>
      <el-form-item label="权限组名称">
        <el-select v-model="addForm.permission_group_id" placeholder="请选择">
          <el-option
            v-for="item in permission_group"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="addForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="介绍">
        <el-input
          class="textarea"
          type="textarea"
          v-model="addForm.introduction"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { add, update } from '@/api/base/users.js'
import { list } from '@/api/base/permissions.js'
export default {
  name: 'UserAdd',
  props: {
    user: {
      type: Object,
      required: null
    },
    isShow: Boolean
  },
  data () {
    return {
      permission_group: [],
      addForm: {
        username: '',
        phone: '',
        permission_group_id: '',
        email: '',
        password: '',
        role: '',
        introduction: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        password: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      }
    }
  },
  computed: {
    msg () {
      return this.user ? '编辑' : '创建'
    }
  },
  watch: {
    isShow (value) {
      if (value && this.user) {
        this.addForm = {
          ...this.addForm,
          username: this.user.username,
          email: this.user.email,
          permission_group_id: this.user.permission_group_id,
          role: this.user.role,
          phone: this.user.phone,
          introduction: this.user.introduction,
          id: this.user.id
        }
        // this.addForm = this.user
      }
    }
  },
  created () {
    this.getPermissionsList()
  },
  methods: {
    // 获取权限列表
    async getPermissionsList () {
      const { data } = await list()
      this.permission_group = data.list
    },
    // 点击取消
    handleCancel () {
      this.$emit('update:isShow', false)
      this.$refs.ruleForm.resetFields()
      this.addForm = {
        username: '',
        phone: '',
        permission_group_id: '',
        email: '',
        password: '',
        role: '',
        introduction: ''
      }
    },
    // 点击确定
    async handleOk () {
      await this.$refs.ruleForm.validate()
      try {
        if (this.user) {
          const res = await update(this.addForm)
          console.log(res)
        } else {
          await add(this.addForm)
        }
        this.$emit('getList')
        this.$message.success(`${this.msg}用户成功`)
        this.handleCancel()
      } catch (e) {
        this.$message.error(`${this.msg}用户失败`)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.demo-ruleForm {
  margin-left: 180px;
  ::v-deep .el-input,
  .textarea {
    width: 280px;
  }
}
</style>
